<template>
  <div>
    <el-form
      ref="forgetForm"
      :model="forForm"
      :rules="forRules"
    >
      <el-row style="font-size: 18px">
        请在下面输入你的<span style="color: indianred">新密码</span>并提交
      </el-row>
      <el-form-item prop="password" style="margin-top: 15px">
        <el-input v-model="forForm.password" type="text" autocomplete="off" placeholder="请输入新密码">
          <span slot="prepend">
            <i class="el-icon-key" />新密码
          </span>
        </el-input>
      </el-form-item>
      <el-form-item prop="checkPassword">
        <el-input v-model="forForm.checkPassword" type="text" autocomplete="off" placeholder="请再次输入密码">
          <span slot="prepend">
            <i class="el-icon-lock" />重复密码
          </span>
        </el-input>
      </el-form-item>
      <el-row type="flex" justify="center">
        <el-button type="primary" style="width: 100%" @click="nextStep">提交</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { validateRegisterPassword } from '@/utils/validate-tools'

export default {
  name: 'ForgetThree',
  data() {
    const validateCheckPassword = (rule, value, callback) => {
      const valueStatus = this.forForm.password === value
      if (value === '') {
        callback(new Error('确认密码不能为空'))
        return
      }
      if (valueStatus) {
        callback()
      } else {
        callback(new Error('与第一次密码不同，请重新设置密码'))
      }
    }
    return {
      forForm: {
        password: '',
        checkPassword: ''
      },
      forRules: {
        password: [{ require: true, trigger: 'blur', validator: validateRegisterPassword }],
        checkPassword: [{ require: true, trigger: 'blur', validator: validateCheckPassword }]
      }
    }
  },
  methods: {
    nextStep() {
      // 这里有一大段代码
      this.$emit('stepChangeEvent', 4)
      this.$refs.forgetForm.resetFields()
    },
    clearAllData() {
      this.$refs.forgetForm.resetFields()
    }
  }
}
</script>

<style scoped>

</style>
